// 柱状图组件
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react'
const BarCharts = ({title})=>{
    const chartDom = useRef(null);
    useEffect(()=>{
        // var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom.current);
        var option;

        option = {
            title: {
                text: title,
            },
            xAxis: {
                type: 'category',
                data: ['Vue','React','Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [10,40,70],
                type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);
    })
    return <div ref={chartDom} style={{width:'500px',height:'400px'}}></div>;
}
export default BarCharts;